<template>
  <view class="container">
    <view class="form">
      <text class="title">注册</text>
      <input class="input" placeholder="请输入用户名" v-model="username" />
      <input class="input" placeholder="请输入密码" v-model="password" type="password" />
      <input class="input" placeholder="请确认密码" v-model="confirmPassword" type="password" />
      <button class="btn" type="primary" @click="handleRegister">注册</button>
      <view class="link">
        <text>已有账号？</text>
        <navigator url="/pages/login/login">去登录</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '' // 确认密码字段
    }
  },
  methods: {
    handleRegister() {
      // 1. 校验：所有字段必填
      if (!this.username || !this.password || !this.confirmPassword) {
        uni.showToast({
          title: '请输入完整信息',
          icon: 'none'
        })
        return
      }
      // 2. 校验：两次密码一致
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        })
        return
      }
      // 3. 模拟注册成功（实际需调用后端接口）
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      })
      // 注册成功后，跳转回登录页
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }, 1500)
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}
.form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
  width: 90%;
  max-width: 550rpx;
}
.title {
  display: block;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.input {
  border: 1rpx solid #eee;
  border-radius: 5rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.btn {
  margin-top: 20rpx;
}
.link {
  text-align: center;
  margin-top: 20rpx;
  font-size: 24rpx;
}
.link navigator {
  color: #007AFF;
}
</style>